            .home {
                height: 100vh;
            }
            
            .login-container {
                display: flex;
                align-items: center;
                background-image: url("./assets/carry-on-colour.svg");
                height: calc(100vh - 70px);
                background-repeat: no-repeat;
                background-position: right;
                padding-left: 5%;
                padding-right: 5%;
                margin-top: 70px;
            }
            
            .card {
                /* Add shadows to create the "card" effect */
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
                transition: 0.3s;
                height: 70%;
                width: 45%;
            }
            /* On mouse-over, add a deeper shadow */
            
            .card:hover {
                box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
            }
            /* Add some padding inside the card container */
            
            .login-container .container {
                padding-left: 7%;
                padding-right: 7%;
                height: 100%;
            }
            
            .login-container .container h1 {
                font-size: 2.5rem;
            }
            
            .login-container .container form {
                display: flex;
                height: 80%;
                flex-direction: column;
                justify-content: space-around;
                align-self: center;
            }
            
            input[type="text"],
            input[type="password"] {
                padding-left: 1px;
                padding-right: 1px;
                height: 40px;
                border-radius: 5px;
                border: .5px solid rgb(143, 143, 143);
                font-size: 15px;
            }
            
            label {
                display: flex;
                flex-direction: column;
            }
            
            .login-container button {
                height: 40px;
                font-weight: bold;
                font-size: 15px;
                background-color: #F42B4B;
                color: rgb(255, 255, 255);
            }
            
            .login-container button:hover {
                background-color: rgb(151, 25, 46);
                cursor: pointer;
            }
            
            .login-container button:focus {
                outline: none !important;
            }
            
            .spinner {
                animation: spinner infinite .9s linear;
                height: 90%;
            }
            
            .spinner:focus {
                border: none;
            }
            
            @keyframes spinner {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(360deg);
                }
            }
            
            .form-error {
                color: #F42B4B;
                text-align: center;
            }
            
            @media screen and (max-width: 700px) {
                .login-container {
                    justify-content: center;
                    background-image: none;
                }
                .card {
                    width: 80%;
                    align-self: center;
                }
            }
            
            @media screen and (max-width: 350px) {
                .card {
                    width: 100%;
                }
            }
            /******  LOGIN PAGE  ******/
            /******  HEADER  ******/
            
            #navigation {
                width: 100%;
                position: fixed;
                z-index: 10;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                background-color: #F42B4B;
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
                height: 70px;
                top: 0;
                padding-right: 5px;
                padding-left: 5px;
            }
            
            #navigation h1 {
                color: white;
            }
            
            #navigation button {
                background-color: transparent;
                border: none;
                align-self: center;
            }
            
            #navigation button:hover {
                cursor: pointer;
            }
            
            #navigation button:focus {
                outline: none !important;
            }
            /******  HEADER  ******/
            /******  HOME PAGE  ******/
            
            .home,
            .toggle-button {
                margin-top: 100px;
                margin-left: 2%;
                margin-right: 2%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
            
            .toggle-button {
                width: 200px;
                text-align: center;
                justify-content: center;
                height: 50px;
                border: none;
                background-color: #F42B4B;
                color: #fff;
                font-size: 14px;
                font-weight: bold;
            }
            
            .toggle-button {
                margin-bottom: 10px;
            }
            /******  HOME PAGE  ******/
            /*******  MODAL  *******/
            
            .modal {
                background: rgba(0, 0, 0, 0.1);
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 20;
                opacity: 1;
                visibility: visible;
                transition: opacity 0.4s ease, visibility 0.4s ease;
            }
            
            .modal.off {
                opacity: 0;
                visibility: hidden;
            }
            
            .modal-table-container {
                display: table;
                height: 100%;
                width: 100%;
            }
            
            .modal-table-cell {
                display: table-cell;
                vertical-align: middle;
            }
            
            .modal-overlay {
                width: 100%;
                background: #fff;
                margin: 0 auto;
                box-shadow: 0 1px 10px #aaa;
                border-radius: 4px;
                padding: 35px 30px 20px 30px;
            }
            
            .modal-overlay.small {
                max-width: 450px;
                margin-top: 5px;
                margin-bottom: 5px;
                max-height: calc(100vh - 10px);
                overflow: hidden;
            }
            
            .modal-header {
                margin-bottom: 30px;
            }
            
            .modal-title {
                font-size: 20px;
            }
            
            div.modal-form-inputs {
                max-height: calc(100vh - 210px);
                overflow-y: scroll;
                overflow: auto;
                margin-top: -10px;
            }
            
            div.modal-form-inputs input[type="text"] {
                height: auto;
                padding: 5px;
                width: 95%;
            }
            
            div.modal-form-inputs label {
                margin-top: 5px;
                font-weight: lighter;
            }
            
            .button {
                display: inline-block;
                font-family: "Open Sans Semibold", sans-serif;
                white-space: nowrap;
                padding: 7px 10px;
                border: 1px solid transparent;
                cursor: pointer;
                outline: none;
                outline: 0;
                border-radius: 4px;
                transition: background 0.4s ease;
                font-size: 14px;
            }
            
            .button-default {
                background: transparent;
                border-color: #ddd;
                color: #666666;
            }
            
            .button-default:hover {
                border-color: #ccc;
                color: #333;
            }
            
            .button-primary {
                background: #0192dd;
                color: #fff;
            }